<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>人来人往</title>
		<link rel="stylesheet" href="css/main.css" />
		<link rel="stylesheet" type="text/css" href="css/animate.min.css"/>
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<link rel="stylesheet" type="text/css" href="css/APlayer.min.css"/>
	</head>
	<body>
		<!-- 顶部滚动进度条 -->
		<div class="progress"></div>
		<div class="top">
			<div class="box">
				<a href="index.html">首页</a>
				<a href="#">动态</a>
				<a href="#">音乐盒</a>
				<a href="#">我的笔记</a>
				<div class="dropdown">
				  <span class="dropdown_dow">常用工具</span>
				  <div class="dropdown-content ">
					<a href="#">列表1</a>
					<a href="#">列表2</a>
					<a href="#">列表3</a>
				  </div>
				</div>
				<a href="#">我的游戏</a>
				<a href="#">语录集</a>
				<a href="#">时间轴</a>
				<a href="#">留言板</a>
				<a href="link.html">友情链接</a>
			</div>
			<!-- <div class="QQ">
				<img src="img/QQ-logo.png" alt="">
			</div> -->
		</div>
		<!-- 中部图片and头像 -->
		<div class="content">
			<div class="wall">
				<div class="layui-carousel" id="lunbo" >
				  <div carousel-item>
				    <img src="img/wp_02-1024x288.jpg" >
				    <img src="img/banner3.jpg" >
				  </div>
				</div>
				
				<p>&nbsp;</p>
				<div class="head ">
					<img src="img/people.jpg" alt="">
				</div>
				<div class="link" style="height: 6vh;width: 10vw;">
					<div><a href="https://www.jianshu.com/u/03ecacbb2a42" target="_blank"><img src="img/jianshu.jpg"  alt=""></a></div>
					<div><a href="https://gitee.com/cwljxf" target="_blank"><img src="img/mayun.jpg" alt=""></a></div>
					<div><a href="https://github.com/chenweilong1713/" target="_blank"><img src="img/github.jpg" alt=""></a></div>
				</div>
			</div>
		</div>
		<!-- 中下部门，分为三份 -->
		<div class="below" >
			<div  class="below-left" >
				<div style="background-color: #FFFFFF;">
					<br>
					<div>
						<div id="circle" style="background-color: #FC625D;"></div>
						<div id="circle" style="background-color: #FDBC40;"></div>
						<div id="circle" style="background-color: #35CD4B;"></div>
						<div class="subtitle">
							&nbsp;&nbsp;点击排行
						</div>
					</div>
					<br>
					<!-- 排行列表 -->
					
					<div class="parcel">
						<a href="#">
							<div class="seniority">
									<div class="left">
										<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2365878393,2194089157&fm=26&gp=0.jpg" alt="">
									</div>
									<div class="right">
										<p># MybatisPlus中常用方法vue-cli3.0引入jQuery使用animate.css动态特效</p>
										<p>999次浏览</p>
									</div>
							</div>
						</a>
					</div>
					
					<div class="parcel">
						<a href="#">
							<div class="seniority">
									<div class="left">
										<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1695136610,59628710&fm=26&gp=0.jpg" alt="">
									</div>
									<div class="right">
										<p># vue-cli3.0引入jQuery使用animate.css动态特效</p>
										<p>999次浏览</p>
									</div>
							</div>
						</a>
					</div>
					
					<div class="parcel">
						<a href="#">
							<div class="seniority">
									<div class="left">
										<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4170459073,464873169&fm=11&gp=0.jpg" alt="">
									</div>
									<div class="right">
										<p># localStorage的使用</p>
										<p>999次浏览</p>
									</div>
							</div>
						</a>
					</div>
					
					<div class="parcel">
						<a href="#">
							<div class="seniority">
									<div class="left">
										<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2474629324,2924199176&fm=26&gp=0.jpg" alt="">
									</div>
									<div class="right">
										<p># vue中生命周期（笔记）</p>
										<p>999次浏览</p>
									</div>
							</div>
						</a>
					</div>
					
					<div class="parcel">
						<a href="#">
							<div class="seniority">
									<div class="left">
										<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3542102612,1346992094&fm=26&gp=0.jpg" alt="">
									</div>
									<div class="right">
										<p># vue路由</p>
										<p>999次浏览</p>
									</div>
							</div>
						</a>
					</div>
					
					<div class="parcel">
						<a href="#">
							<div class="seniority">
									<div class="left">
										<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3330796269,3708674462&fm=11&gp=0.jpg" alt="">
									</div>
									<div class="right">
										<p># 父组件获取子组件的数据和方法</p>
										<p>999次浏览</p>
									</div>
							</div>
						</a>
					</div>
					
					<div class="parcel">
						<a href="#">
							<div class="seniority">
									<div class="left">
										<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3330796269,3708674462&fm=11&gp=0.jpg" alt="">
									</div>
									<div class="right">
										<p># vue中父组件传值</p>
										<p>999次浏览</p>
									</div>
							</div>
						</a>
					</div>
					
					<div class="parcel">
						<a href="#">
							<div class="seniority">
									<div class="left">
										<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=231766083,3067378981&fm=11&gp=0.jpg" alt="">
									</div>
									<div class="right">
										<p># Centos7中Nginx安装</p>
										<p>999次浏览</p>
									</div>
							</div>
						</a>
					</div>
					
					<div class="parcel">
						<a href="#">
							<div class="seniority">
									<div class="left">
										<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1090129808,4094126092&fm=26&gp=0.jpg" alt="">
									</div>
									<div class="right">
										<p># Spring Boot +MyBatisPlus分页</p>
										<p>999次浏览</p>
									</div>
							</div>
						</a>
					</div>
					
					<div class="parcel">
						<a href="#">
							<div class="seniority">
									<div class="left">
										<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3592305842,1346430120&fm=26&gp=0.jpg" alt="">
									</div>
									<div class="right">
										<p># springboot中单文件上传和多文件上传</p>
										<p>999次浏览</p>
									</div>
							</div>
						</a>
					</div>
					
					<br>
				</div>
				<br>
				<div style="background-color: #FFFFFF;">
					<br>
					<div>
						<div id="circle" style="background-color: #FC625D;"></div>
						<div id="circle" style="background-color: #FDBC40;"></div>
						<div id="circle" style="background-color: #35CD4B;"></div>
						<div class="subtitle">
							&nbsp;&nbsp;最新发布
						</div>
					</div>
					<br>
					<!-- 排行列表 -->
					
					<div class="parcel">
						<a href="#">
							<div class="seniority">
									<div class="left">
										<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2365878393,2194089157&fm=26&gp=0.jpg" alt="">
									</div>
									<div class="right">
										<p># MybatisPlus中常用方法vue-cli3.0引入jQuery使用animate.css动态特效</p>
										<p>999次浏览</p>
									</div>
							</div>
						</a>
					</div>
					
					<div class="parcel">
						<a href="#">
							<div class="seniority">
									<div class="left">
										<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1695136610,59628710&fm=26&gp=0.jpg" alt="">
									</div>
									<div class="right">
										<p># vue-cli3.0引入jQuery使用animate.css动态特效</p>
										<p>999次浏览</p>
									</div>
							</div>
						</a>
					</div>
					
					<div class="parcel">
						<a href="#">
							<div class="seniority">
									<div class="left">
										<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4170459073,464873169&fm=11&gp=0.jpg" alt="">
									</div>
									<div class="right">
										<p># localStorage的使用</p>
										<p>999次浏览</p>
									</div>
							</div>
						</a>
					</div>
					
					<div class="parcel">
						<a href="#">
							<div class="seniority">
									<div class="left">
										<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2474629324,2924199176&fm=26&gp=0.jpg" alt="">
									</div>
									<div class="right">
										<p># vue中生命周期（笔记）</p>
										<p>999次浏览</p>
									</div>
							</div>
						</a>
					</div>
					
					<div class="parcel">
						<a href="#">
							<div class="seniority">
									<div class="left">
										<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3542102612,1346992094&fm=26&gp=0.jpg" alt="">
									</div>
									<div class="right">
										<p># vue路由</p>
										<p>999次浏览</p>
									</div>
							</div>
						</a>
					</div>
					
					<div class="parcel">
						<a href="#">
							<div class="seniority">
									<div class="left">
										<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3330796269,3708674462&fm=11&gp=0.jpg" alt="">
									</div>
									<div class="right">
										<p># 父组件获取子组件的数据和方法</p>
										<p>999次浏览</p>
									</div>
							</div>
						</a>
					</div>
					
					<br>
				</div>
				
			</div>
			<div class="below-centon animated slideInUp" >
				<!-- 通知轮播 -->
				<div class="layui-carousel" id="inform"  style="background-color:rgb(255,255,255)">
				  <div carousel-item>
					<div style="background-color:#FFFFFF;height: 100%;">
						<div style="height: 100%;width: 40px;background-color: #F1746B;border-radius:0px;float: left;text-align: center;">
							<div style="margin-top: 1.18vh;">
								<i class="layui-icon layui-icon-notice" style="color: #FFFFFF;"></i>
							</div>
						</div>
						<div style="margin:1.1vh;text-align: center;">
							<p style="letter-spacing:1px">我的小站正式上线!</p>
						</div>
					</div>
					
					<div style="background-color:#FFFFFF;height: 100%;">
						<div style="height: 100%;width: 40px;background-color: #F1746B;border-radius:0px;float: left;text-align: center;">
							<div style="margin-top: 1.18vh;">
								<i class="layui-icon layui-icon-notice" style="color: #FFFFFF;"></i>
							</div>
						</div>
						<div style="margin:1.1vh;text-align: center;">
							<p style="letter-spacing:1px">小站已接入第三方登陆方式,可以使用QQ登陆哦! </p>
						</div>
					</div>
				  </div>
				</div>
				<br>
<!-- ********************************************************************************************************************* -->				
				<!-- 主页动态列表,分为图文，音乐，视频 -->
				<a href="#">
					<div style="background-color: #FFFFFF;">
						<br>
						<div class="dynamic">
							<div>
								<img class="dynamic_head" src="img/people.jpg" alt="">
							</div>
							<div>
								&nbsp;&nbsp;2019-12-10
							</div>
							<br><br>
							<s1>
								<div class="starg" style="background-color: #52CC87;">
									<p style="color: #FFFFFF;">&nbsp; &nbsp;#置顶#&nbsp;&nbsp; &nbsp;</p>
								</div>
								<div class="starg">
									<p style="color: #FFFFFF;">&nbsp; &nbsp;#图文#&nbsp;&nbsp; &nbsp;</p>
								</div>
								<br>
							</s>
							<br>
							<p style="letter-spacing:1px">我的小站正式上线 欢迎各位光临！</p>
							<br>
							<img style="width: 100%;" src="img/1.jpg" >
							<br>
						</div>
						<br>
						<div class="dynamic">
							<img class="dynamic_dow" src="img/liaotian.svg" alt=""> <span>999</span>
							&nbsp;&nbsp;&nbsp;
							<img class="dynamic_dow" src="img/redupaixu.svg" alt=""> <span>999</span>
						</div>
						<br>
						<hr style="width: 95%;margin: auto;">
						<br>
					</div>
				</a>
<!-- ********************************************************************************************************************* -->	
				<a href="#" onclick="return check()">
					<div style="background-color: #FFFFFF;">
						<br>
						<div class="dynamic">
							<div>
								<img class="dynamic_head" src="img/people.jpg" alt="">
							</div>
							<div>
								&nbsp;&nbsp;2019-12-10
							</div>
							<br><br>
							<s1>
								<div class="starg">
									<p style="color: #FFFFFF;">&nbsp; &nbsp;#视频#&nbsp;&nbsp; &nbsp;</p>
								</div>
								<br>
							</s>
							<br>
							<p style="letter-spacing:1px">放个小视频</p>
							<br>
							<video title="video" src="
							http://image.jxfcwl.top/myblog-video/4e59689b3cabb9a038b12b59ab2b78b1_1280x720.mp4
							" width="98%" controls ></video>
						</div>
						<br>
						<div class="dynamic">
							<img class="dynamic_dow" src="img/liaotian.svg" alt=""> <span>999</span>
							&nbsp;&nbsp;&nbsp;
							<img class="dynamic_dow" src="img/redupaixu.svg" alt=""> <span>999</span>
						</div>
						<br>
						<hr style="width: 95%;margin: auto;">
						<br>
					</div>
				</a>	
			</div>
			<div class="below-right">
					<div style="background: #FFFFFF;">
						<br>
						<div id="circle" style="background-color: #FC625D;"></div>
						<div id="circle" style="background-color: #FDBC40;"></div>
						<div id="circle" style="background-color: #35CD4B;"></div>
						<div class="subtitle">
							&nbsp;&nbsp;个人信息
						</div>
						<br>
						<div class="message">
							<p><i class="layui-icon layui-icon-username"></i>&nbsp;昵称:小陈</p>
							<p><i class="layui-icon layui-icon-male"></i>&nbsp;性别:男</p>
							<p><i class="layui-icon layui-icon-date"></i>&nbsp;年龄:1999-01-15</p>
							<p><i class="layui-icon layui-icon-login-qq"></i>&nbsp;QQ:2502906272</p>
						</div>
						<br>
						<br>
					</div>
					<br>
					<div style="background-color: #FFFFFF">
						<br>
						<div id="circle" style="background-color: #FC625D;"></div>
						<div id="circle" style="background-color: #FDBC40;"></div>
						<div id="circle" style="background-color: #35CD4B;"></div>
						<div class="subtitle">
							&nbsp;&nbsp;动态
						</div>
						<!-- 这里的flex布局是居中,你可以在main.css中搜索一下 live 然后修改方向,我个人比较喜欢居中,哈哈 -->
						<div class="live">
							<a href="#"><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1198854719,4294312191&fm=11&gp=0.jpg" alt="图片加载失败"></a>
							<a href="#"><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2697257871,2645712076&fm=11&gp=0.jpg" alt="图片加载失败"></a>
							<a href="#"><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2338069061,770258175&fm=11&gp=0.jpg" alt="图片加载失败"></a>
						</div>
						<br>
					</div>
				<br>
				<div style="background-color: #FFFFFF">
					<br>
					<div id="circle" style="background-color: #FC625D;"></div>
					<div id="circle" style="background-color: #FDBC40;"></div>
					<div id="circle" style="background-color: #35CD4B;"></div>
					<div class="subtitle">
						&nbsp;&nbsp;最新评论
					</div>
					<div class="comment">
						<a href="#"><img class="new_comment" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1198854719,4294312191&fm=11&gp=0.jpg" alt="图片加载失败"></a>
						<a href="#"><img class="new_comment" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2697257871,2645712076&fm=11&gp=0.jpg" alt="图片加载失败"></a>
						<a href="#"><img class="new_comment" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2338069061,770258175&fm=11&gp=0.jpg" alt="图片加载失败"></a>
						<a href="#"><img class="new_comment" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1198854719,4294312191&fm=11&gp=0.jpg" alt="图片加载失败"></a>
						<a href="#"><img class="new_comment" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2697257871,2645712076&fm=11&gp=0.jpg" alt="图片加载失败"></a>
						<a href="#"><img class="new_comment" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2338069061,770258175&fm=11&gp=0.jpg" alt="图片加载失败"></a>
						<a href="#"><img class="new_comment" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1198854719,4294312191&fm=11&gp=0.jpg" alt="图片加载失败"></a>
						<a href="#"><img class="new_comment" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2697257871,2645712076&fm=11&gp=0.jpg" alt="图片加载失败"></a>
						<a href="#"><img class="new_comment" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2338069061,770258175&fm=11&gp=0.jpg" alt="图片加载失败"></a>
					</div>
					<br>
				</div>
				<br>
				<!-- 每日音乐 -->
				<div style="background: #FFFFFF;">
					<br>
					<div id="circle" style="background-color: #FC625D;"></div>
					<div id="circle" style="background-color: #FDBC40;"></div>
					<div id="circle" style="background-color: #35CD4B;"></div>
					<div class="subtitle">
						&nbsp;&nbsp;每日音乐
					</div>
					<br>
					<div style="text-align: center;">
						<img style="width: 90%;" src="img/20180723133705_eimsg.gif" alt="">
						<br><br>
						<audio class="audio" style="width: 90%;text-align: center;" src="https://img.jinsom.cn/user_files/12551/bg-music/music_1530776683.mp3" controls></audio>
					</div>
					<br>
					<br>
				</div>
			</div>
		</div>
		<br>	
		<div style="text-align: center;">
			<span>Sunshine&nbsp;人来人往&nbsp;&nbsp;&nbsp;</span><a href="http://beian.miit.gov.cn/" style="color: #6D6D6D;">苏ICP备19025063号-2</a>
		</div>
		<br>
		<div id="aplayer"></div>
	</body>
	<script src="js/jquery-3.4.1.min.js"></script>
	<script src="js/main.js"></script>
	<script src="layui/layui.js"></script>
	<script src="js/APlayer.min.js"></script>
	<script>
		layui.use('carousel', function(){
		  var carousel = layui.carousel;
		  //建造实例
		  carousel.render({
		    elem: '#lunbo'
		    ,width: '100%' ,//设置容器宽度,
			height:'85%',
			arrow:"none", // 是否显示箭头
			indicator:"none"  //是否显示点点点
		    ,anim: 'updown' //切换动画方式
		  });
		});
		
		
		layui.use('carousel', function(){
		  var carousel = layui.carousel;
		  //建造实例
		  carousel.render({
		    elem: '#inform'
		    ,width: '100%' ,//设置容器宽度,
			height:'38px',
			arrow:"none", // 是否显示箭头
			indicator:"none"  //是否显示点点点
		    ,anim: 'updown' //切换动画方式
		  });
		});
		// 阻止a标签中video元素跳转
		function check(e){
		   return (e||event).target.title!="video";
		}
		
		// 播放器
		const ap = new APlayer({
		    container: document.getElementById('aplayer'),
			fixed: true,
		    audio: [
			{
		        name: '长生诀',
		        artist: '未知',
		        url: 'http://image.jxfcwl.top/myblog-video/%E8%A5%BF%E7%93%9CJUN%20-%20%E9%95%BF%E7%94%9F%E8%AF%80.mp3',
		        cover: 'http://image.jxfcwl.top/myblog-video/9c774d91gy1ft4lhr5vbmg20jp08okbw.gif'
		    }
			]
		});
	</script>
</html>
